<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全部商品</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
	#kuang {
		width: 100px;
		height: 30px;
	}
	#pia{
    		margin-left: 100px;
    	}
    #sous{
    	width: 50px;
    	height: 35px;
    	background-color: orange;
    	color: white;
    	margin-right: 90px;
    }
    #queDing{
    
    	width: 50px;
    	height: 25px;
    	margin-right: 90px;
    	margin-top: -1px;
    }
</style>
<script type="text/javascript">
	function showProduct(t){
		sessionStorage.setItem("prodcutId",t)
		window.location.href="products_show.html?id=${res[i].id}";
		return false;
	}
</script>
<script type="text/javascript">

$(function(){
	$.post("getCount",{},function(res){
		console.log(res)
		var count = Math.ceil(res/8); //一共多少页
		console.log(count)
		for (var i = 1; i <= count ; i++) {
			$("#yesu").append(`
					<button id="count" onclick="count(${i})"  >第${i}页</button>
			`)
		}
	},"json")
})

$(function(){
	$.post("getProduct",{
		page:1,
		limit:8
	},function(res){
		for(var i=0;i<res.length;i++){
			$("#alei").append(`
						<div class="goods">
						<ul>
							<li class="goods-products"><span><a href="products_show.html?id=${res[i].id}" onclick="showProduct(`+res[i].id+`)" ><img
										src="images/${res[i].img}" alt="" width="250" height="215"
										class="main-img"></a></span>

								<ul class="goods-small-img">
									<li><a href="products_show.html?id=${res[i].id}" onclick="showProduct(`+res[i].id+`)" ><img src="images/${res[i].img}" alt="" width="50"
										height="50"></li>
								</ul>

								<div class="goods-title">
									<a href="products_show.html?id=${res[i].id}">${res[i].name} </a>
								</div>
								<div class="goods-label">
									
								</div> <span class="goods-money">${res[i].sellPrice}</span> 
							</li>
					</div>
					`)
		}
	},"json")
})

function count(page){
	$("#alei").html("")
	 $.post("getProduct",{
		 page:page,
		 limit:8
	 },function(res){
		 for(var i=0;i<res.length;i++){
				$("#alei").append(`
							<div class="goods">
							<ul>
								<li class="goods-products"><span><a href="products_show.html?id=${res[i].id}" onclick="showProduct(`+res[i].id+`)" ><img
											src="images/${res[i].img}" alt="" width="250" height="215"
											class="main-img"></a></span>

									<ul class="goods-small-img">
										<li><a href="products_show.html?id=${res[i].id}" onclick="showProduct(`+res[i].id+`)" ><img src="images/${res[i].img}" alt="" width="50"
											height="50"></li>
									</ul>

									<div class="goods-title">
										<a href="products_show.html?id=${res[i].id}">${res[i].name} </a>
									</div>
									<div class="goods-label">
										
									</div> <span class="goods-money">${res[i].sellPrice}</span> 
								</li>
						</div>
						`)
			}
	 },"json")
}

$("button#count").click(function(){
	 
})


function souSuo(){
			$("#alei").html("")//清空页面
			 $.post("cProduct",{
				 name:$("#pname").val()
	 		 },function(res){
	 			 console.log(res)
					for(var i=0;i<res.length;i++){
							$("#alei").append(`
									<div class="goods">
									<ul>
										<li class="goods-products"><span><a href="products_show.html"><img
													src="images/${res[i].img}" alt="" width="250" height="215"
													class="main-img"></a></span>

											<ul class="goods-small-img">
												<li><img src="images/${res[i].img}" alt="" width="50"
													height="50"></li>
											</ul>

											<div class="goods-title">
												<a href="products_show.html">${res[i].name} </a>
											</div>
											<div class="goods-label">
												
											</div> <span class="goods-money">${res[i].sellPrice}</span> 
										</li>
								</div>
								`)
					}
					 
					 
				 },"json")
			 
		 }

function queDing(){
	$("#alei").html("")//清空页面
	 $.post("getProductss",{ 
		 dial:$("#leiXing").val(),
		 watchCase:$("#caiZhi").val(),
		 style:$("#fengGe").val(),
		 beginPrice:$("#beginPrice").val(),
		 endPrice:$("#endPrice").val()
	 },function(res){
			 console.log(res)
			for(var i=0;i<res.length;i++){
					$("#alei").append(`
							<div class="goods">
							<ul>
								<li class="goods-products"><span><a href="products_show.html?id=${res[i].id}" onclick="showProduct(`+res[i].id+`)"><img
											src="images/${res[i].img}" alt="" width="250" height="215"
											class="main-img"></a></span>

									<ul class="goods-small-img">
										<li><a href="products_show.html?id=${res[i].id}" onclick="showProduct(`+res[i].id+`)">
										<img src="images/${res[i].img}" alt="" width="50"
											height="50"></li>
									</ul>

									<div class="goods-title">
										<a href="products_show.html?id=${res[i].id}" onclick="showProduct(`+res[i].id+`)">${res[i].name} </a>
									</div>
									<div class="goods-label">

									</div> <span class="goods-money">${res[i].sellPrice}</span> 
								</li>
						</div>
						`)
			}
			 
			 
		 },"json")
} 

$(function(){
$("#alei").html("")//清空页面
$.post("dialProduct",{ 
},function(res){
 console.log(res)
	for(var i=0;i<res.length;i++){
			$("#leiXing").append(`
					<option value="${res[i].dial}">${res[i].dial}</option>
				`)
	}
	 
	 
 },"json")
}) 

$(function(){
$("#alei").html("")//清空页面
$.post("watchProduct",{ 
},function(res){
 console.log(res)
	for(var i=0;i<res.length;i++){
			$("#caiZhi").append(`
					<option value="${res[i].watchCase}">${res[i].watchCase}</option>
				`)
	}
	 
	 
 },"json")
}) 

$(function(){
$("#alei").html("")//清空页面
$.post("styleProduct",{ 
},function(res){
 console.log(res)
	for(var i=0;i<res.length;i++){
			$("#fengGe").append(`
					<option value="${res[i].style}">${res[i].style}</option>
				`)
	}
	 
	 
 },"json")
}) 
	 
</script>
</head>
<body>
	<!--header-->
	<div class="header2">
		<div class="header-box">
			<div class="header">
				<div class="header-left-title">
					<div class="welcome">
						<img class="icon" src="images/icon/welcome.png" alt="">&nbsp;欢迎来到<a
							href="">AnJunDCM官网</a>!
					</div>
					<div class="login">
						&nbsp;&nbsp;&nbsp;<a href="login.html">登陆</a>&nbsp;丨&nbsp;<a
							href="reg.html">免费注册</a>
					</div>
				</div>
				<div class="header-center-title">
					<ul>
						<li><a href="home/user.html">我的AnJun</a></li>
						<li><a href="cart.html">购物车</a></li>
						<li><a href="">我的订单</a></li>
						<li><a href="">收藏网站</a></li>
						<li><a href="">积分</a></li>
					</ul>
				</div>
				<div class="header_right_title">
					<ul>
						<li><a href="">我要供货</a></li>
						<li><a href="">客服中心<i class="kefu-icon"><img
									src="images/kefu.png" alt="" width="20" height="20"></i></a></li>

					</ul>

				</div>


			</div>
			<div class="header-nav-box">
				<div class="nav">
					<div class="nav-logo">
						<a href="" class="logo"><img src="images/logo.png" alt=""></a>
					</div>
				
 						 <div class="nav-search-box">
                   <form action="" name="fomr1">
                        <div class="nav-search">
                            <div class="bar1">
                               <input type="text" id="pname" name="pname" placeholder="请输入您要搜索的内容..." class="text">
                               <input id="sous" type="button" class="input_btn fr" onclick="souSuo()" name="" value="搜索">
                            </div>
                            
                        </div>
                    </form>
                </div>
				</div>
				
				<div class="nav-daohang">
					<div class="daohang">
						<ul>
							<li><a href="goods.html">全部商品</a></li>
							<li><a href="index.html">首页</a></li>
							<li><a href="daigou.html">指定代购</a></li>
							<li><a href="need.html"> 需求提交</a></li>
							<li><a href="wl-case.html">物流方案</a></li>
							<li><a href="join.html">我要入驻</a></li>
							<li><a href="us.html">关于我们</a></li>
						</ul>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!--hearder end!-->

	<div class="goods-box">
		<div class="goods-main-box">
			    <div id="pia" class="goods-right-box">
       				 <div class="goods-right-split">
            <table width="100%" border="1" cellpadding="0" cellspacing="0" height="40">
                <tr>
                    <td width="120"><label class="layui-form-label">材质：</label>
					<select name="caiZhi" style="width: 80px;" id="caiZhi">
							<option value="未选择">未选择</option>
					</select>
				</td>
                    <td width="120"><label class="layui-form-label">类型：</label>
					<select name="leiXing" style="width: 80px;" id="leiXing">
						<option value="未选择">未选择</option>
					</select>
				</td>
                    <td width="120"><label class="layui-form-label">风格：</label>
					<select  name="fengGe" style="width: 80px;" id="fengGe">
						<option value="未选择">未选择</option>
					</select>
				</td>
                    <td width="200" id="jiaGeQuJian">
                    	价格区间 :
	                    	<input type="text" name="beginPrice" id="beginPrice"
							placeholder="未选择" autocomplete="off"
							class="layui-input">&nbsp;-&nbsp;
	                    	<input type="text" name="endPrice" id="endPrice"
							placeholder="未选择"  autocomplete="off"
							class="layui-input">
                   <input id="queDing" type="button" class="input_btn fr" onclick="queDing()" name="" value="确定">

                    
                </tr>
            </table>
        </div>
				<div class="goods">
					<ul id="alei">
						 
				</div>

				<div id="yesu" class="goods-page">
					

				</div>


			</div>


		</div>

	</div>



	<!--footer-->
	<div class="footer-box">
		<div class="footer-list-box">
			<div class="footer-list">
				<ul>
					<img src="images/icon/about.png" alt="" width="20" height="20">&nbsp;关于我们
					<li class="magin"><a href="">关于安骏</a></li>
					<li><a href="">产品服务</a></li>
					<li><a href="">联系我们</a></li>
					<li><a href="">企业文化</a></li>
				</ul>
			</div>

			<div class="footer-list">
				<ul>
					<img src="images/icon/zhinan.png" alt="" width="20" height="20">&nbsp;新手指南
					<li class="magin"><a href="">新手福利</a></li>
					<li><a href="">推荐有奖</a></li>
					<li><a href="">会员中心</a></li>
					<li><a href="">我的积分</a></li>
					<li><a href="">客服中心</a></li>
				</ul>
			</div>

			<div class="footer-list">
				<ul>
					<img src="images/icon/zhifu.png" alt="" width="20" height="20">&nbsp;支付方式
					<li class="magin"><a href="">支付宝</a></li>
					<li><a href="">WeChat</a></li>
					<li><a href="">前海支付</a></li>
					<li><a href="">银联支付</a></li>
					<li><a href="">其它支付</a></li>
				</ul>
			</div>

			<div class="footer-list">
				<ul>
					<img src="images/icon/daohang.png" alt="" width="20" height="20">&nbsp;网站导航
					<li class="magin"><a href="">选品采购</a></li>
					<li><a href="">指定代购</a></li>
					<li><a href="">需求提交</a></li>
					<li><a href="">我要入驻</a></li>
					<li><a href="">系统登录</a></li>
				</ul>
			</div>

			<div class="footer-list">
				<ul>
					<img src="images/kefu.png" alt="" width="20" height="20">&nbsp;客服电话：
					<li class="magin" id="phone"><a href="">0755-12345678</a></li>
					<li><a href="">地址：深圳市龙岗区坂田街道格泰隆工业园</a></li>
					<li><a href="">邮箱：123456789@qq.com</a></li>

				</ul>
			</div>

			<div class="footer-list" style="margin-left: 100px;">
				<ul>
					<img src="images/app.jpg" alt="" width="150" height="150">
					<li class="magin" id="guanzhu"><a href="">关注安骏</a></li>

				</ul>
			</div>


		</div>
		<div class="footer-footer">© 2020-2020 AnJun DCM All Rights
			Reserved 9.0 备案号：123456789</div>

	</div>
	<!--footer end!-->

	

	<!--products焦点图切换-->
	<script type="text/JavaScript">
		// prepare the form when the DOM is ready
		$(document).ready(
				function() {
					var galleryClass = '.goods-products';
					$(galleryClass + ' li img').hover(
							function() {
								var $gallery = $(this).parents(galleryClass);
								$('.main-img', $gallery).attr(
										'src',
										$(this).attr('src').replace('thumb/',
												''));
							});
					var imgSwap = [];
					$(galleryClass + ' li img').each(function() {
						imgUrl = this.src.replace('thumb/', '');
						imgSwap.push(imgUrl);
					});
					$(imgSwap).preload();
				});
		$.fn.preload = function() {
			this.each(function() {
				$('<img/>')[0].src = this;
			});
		}
	</script>

</body>

</html>